import React, { Component } from 'react'
import { Animated, KeyboardAvoidingView, ScrollView, StatusBar, StyleSheet, Text, TextInput, View } from 'react-native'
import { HEIGHT, IS_IOS, ScaleS, STATUSBAR_HEIGHT, WIDTH } from 'src/utils/ScreenUtil'
import PolyvVodPlayerComponent from 'src/bridge/PolyvVodPlayerModule'
import { RNTPolyvVodManager } from 'src/bridge'
import PolyvVodConfig from 'src/bridge/PolyvVodConfigModule'
import PolyvVodView from 'src/pageC/live/live-detail/components/PolyvVodView'
import BasePage from 'src/pageP/base/base-page'
import PolyvLiveView from 'src/pageC/live/live-detail/components/PolyvLiveView'

class PolyvVoidView2 extends Component {
  render () {
    return (
      <PolyvVodPlayerComponent
        ref={this.setPolyvVodPlayerRef}
        style={styles.polyvVodVew}
        onPlayVodEvent={this.props.onPlayVodEvent}
        isAutoStart={false}
        fullScreen={false}/>
    )
  }

  setPolyvVodPlayerRef = ref => (this.polyvVodPlayerRef = ref)

  configPolyVodPlayer = () => {
    console.info('configPolyVodPlayer')
    const User = {
      // 初始化所需的数据
      viewerId: '0bcf19d2a6f3b3b98f886ba0ec7abbd5_0',
      nickName: 'rn_nickName'
    }

    const vodKey = 'rmFmd/NfPqOfEC+4jWlvkzbMF7RCA84z6GuKRYgfjW6b/o1W105nqwwiyKCNZqJ22lE3PYdLDeKKXP961fntDZOYxTl4mxLvdqN87OfiWOFqf5AAYHVg2glrJCv6dThI8TZPN/tYtltBBMPgIFFH4Q=='
    const decodeKey = 'VXtlHmwfS2oYm0CZ'
    const decodeIv = '2u9gDPKdX6GyQJKU'
    PolyvVodConfig.initPolyVod(
      vodKey,
      decodeKey,
      decodeIv,
      User.viewerId,
      User.nickName
    )
      .then(ret => {
        if (ret.code !== 0) {
          // 初始化失败
          var str =
            '初始化失败  errCode=' + ret.code + '  errMsg=' + ret.message
          console.log(str)
        } else {
          // 初始化成功
          console.log('初始化成功')
          this.polyvVodPlayerRef.updateVid(User.viewerId)
          this.polyvVodPlayerRef.initPLay()
        }
      })
      .catch(error => {
        console.log('初始化error', error)
      })
  }
}

export default class TestPolyvVodView extends BasePage {
  constructor (props) {
    super(props)
    this.state = {
      header: null,
      fullscreen: false
    }
  }

  childRender () {
    const { fullscreen } = this.state
    return (
      <View style={styles.container}>
        <View style={[styles.statusbar, fullscreen && { height: 0 }]}/>
        {/*<PolyvVoidView2*/}
        {/*  ref={this.PolyvVoidView2Ref}*/}
        {/*  onPlayVodEvent={this.onPlayVodEvent}/>*/}
        <View>
          <PolyvLiveView
            PolyvLiveSkinPropsChange={this.PolyvLiveSkinPropsChange}
            goBack={this.goBack}
            ref={this.setPolyvLiveViewRef}
          />
        </View>

      </View>
    )
  }

  componentDidMount () {
    // this.configPolyVodPlayer()
    // this.configPolyvWarmPlayer()
    StatusBar.setBarStyle('light-content')
    // this.configPolyvView2()
    // this.configPolyPlayer()
  }

  PolyvLiveSkinPropsChange = (data) => {
    console.info('PolyvLiveSkinPropsChange', data)
  }

  setPolyvLiveViewRef = ref => (this.polyvLiveViewRef = ref)

  onPlayVodEvent = (data) => {
    console.info('onPlayVodEvent', data.nativeEvent)
    const { nativeEvent: { key, value } } = data
    if (key === 'fullscreen') {
      this.setState({
        fullscreen: value
      })
      if (value) {
        StatusBar.setHidden(true)
      }
    }
  }

  PolyvVoidView2Ref = (ref) => {
    this.polyvVoidView2Ref = ref
  }



  configPolyPlayer = () => {
    const data = {
      channel: {
        companyId: 5546,
        coverImg: '',
        demandUrl: '',
        endTime: '2019-11-01 19:35:51',
        icon: '',
        id: 84,
        isCollection: 0,
        isSignUp: false,
        isWarm: 0,
        name: '测试',
        no: 398978,
        signUpNum: 0,
        soldOutTime: '2019-11-02 00:00:00',
        startTime: '2019-11-01 15:35:51',
        state: 'LIVING',
        vidWarmVideo: '',
        warmImg: '',
        warmType: '',
        warmVideo: '',
        watchCount: 2
      },
      polyvSetting: {
        appId: 'fgy5dcw4dh',
        appSecret: 'bfd1b6a1c4ba4b199bc79f1b9332067e',
        encryptionKey: 'VXtlHmwfS2oYm0CZ',
        encryptionVector: '2u9gDPKdX6GyQJKU',
        sdkString: 'rmFmd/NfPqOfEC+4jWlvkzbMF7RCA84z6GuKRYgfjW6b/o1W105nqwwiyKCNZqJ22lE3PYdLDeKKXP961fntDZOYxTl4mxLvdqN87OfiWOFqf5AAYHVg2glrJCv6dThI8TZPN/tYtltBBMPgIFFH4Q==',
        userId: '0bcf19d2a6'
      }
    }
    this.polyvLiveViewRef.configPolyLivePlayer(data)
  }

  configPolyvView2 = () => {
    this.polyvVoidView2Ref.configPolyVodPlayer()
  }

  setPolyvVodPlayerRef = ref => (this.polyvVodPlayerRef = ref)

  configPolyvWarmPlayer = () => {
    const User = {
      // 初始化所需的数据
      viewerId: '0bcf19d2a6f3b3b98f886ba0ec7abbd5_0',
      nickName: 'rn_nickName'
    }

    const vodKey = 'rmFmd/NfPqOfEC+4jWlvkzbMF7RCA84z6GuKRYgfjW6b/o1W105nqwwiyKCNZqJ22lE3PYdLDeKKXP961fntDZOYxTl4mxLvdqN87OfiWOFqf5AAYHVg2glrJCv6dThI8TZPN/tYtltBBMPgIFFH4Q=='
    const decodeKey = 'VXtlHmwfS2oYm0CZ'
    const decodeIv = '2u9gDPKdX6GyQJKU'
    const data = {
      polyvSetting: {
        sdkString: vodKey,
        encryptionKey: decodeKey,
        encryptionVector: decodeIv
      },
      channel: { demandUrl: User.viewerId }
    }
    this.polyvWarmView.configPolyVodPlayer(data)
  }

  configPolyVodPlayer = () => {
    console.info('configPolyVodPlayer')
    const User = {
      // 初始化所需的数据
      viewerId: '0bcf19d2a6f3b3b98f886ba0ec7abbd5_0',
      nickName: 'rn_nickName'
    }

    const vodKey = 'rmFmd/NfPqOfEC+4jWlvkzbMF7RCA84z6GuKRYgfjW6b/o1W105nqwwiyKCNZqJ22lE3PYdLDeKKXP961fntDZOYxTl4mxLvdqN87OfiWOFqf5AAYHVg2glrJCv6dThI8TZPN/tYtltBBMPgIFFH4Q=='
    const decodeKey = 'VXtlHmwfS2oYm0CZ'
    const decodeIv = '2u9gDPKdX6GyQJKU'
    PolyvVodConfig.initPolyVod(
      vodKey,
      decodeKey,
      decodeIv,
      User.viewerId,
      User.nickName
    )
      .then(ret => {
        if (ret.code !== 0) {
          // 初始化失败
          var str =
            '初始化失败  errCode=' + ret.code + '  errMsg=' + ret.message
          console.log(str)
        } else {
          // 初始化成功
          console.log('初始化成功')
          this.polyvVodPlayerRef.updateVid(User.viewerId)
          this.polyvVodPlayerRef.initPLay()
        }
      })
      .catch(error => {
        console.log('初始化error', error)
      })
  }
}
const styles = StyleSheet.create({
  outerContainer: {
    height: HEIGHT
  },
  container: {
    flex: 1
  },
  polyvVodVew: {
    width: WIDTH,
    height: (WIDTH * 9) / 16,
    backgroundColor: '#ffffff'
  },
  statusbar: {
    position: 'relative',
    width: WIDTH,
    height: STATUSBAR_HEIGHT,
    backgroundColor: 'black'
  }
})
